<template>
    <V3Echarts :height="props.height" :options="option" :top="10" />
    <div class="page">
        <el-pagination hide-on-single-page layout="pager" :page-size="changePage.pageSize" :current-page="changePage.currentPage" :total="changePage.total" @update:current-page="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { AXIS_LABEL } from '../chartConfig'
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'
import { ElPagination } from 'element-plus'

const props = defineProps({
    chartData: {
        type: Array,
        default: () => {
            return [
                {
                    name: '金鲳鱼',
                    value: [
                        {
                            name: '精养殖',
                            data: [1, 3] // 1-3月 持续2个月
                        },
                        {
                            name: '催产',
                            data: [3, 4]
                        },
                        {
                            name: '产卵',
                            data: [4, 5]
                        },
                        {
                            name: '养殖',
                            data: [5, 8]
                        },
                        {
                            name: '上市',
                            data: [8, 11]
                        },
                        {
                            name: '冬眠',
                            data: [11, 12]
                        }
                    ]
                },
                {
                    name: '石斑鱼',
                    value: [
                        {
                            name: '冬眠',
                            data: [1, 3]
                        },
                        {
                            name: '养殖',
                            data: [3, 5]
                        },
                        {
                            name: '交配',
                            data: [5, 6]
                        },
                        {
                            name: '产卵',
                            data: [6, 7]
                        },
                        {
                            name: '养殖',
                            data: [7, 12]
                        }
                    ]
                },
                {
                    name: '对虾',
                    value: [
                        {
                            name: '养殖',
                            data: [1, 3]
                        },
                        {
                            name: '交配',
                            data: [3, 4]
                        },
                        {
                            name: '产卵',
                            data: [4, 6]
                        },
                        {
                            name: '养殖',
                            data: [6, 9]
                        },
                        {
                            name: '上市',
                            data: [9, 11]
                        },
                        {
                            name: '养殖',
                            data: [11, 12]
                        }
                    ]
                },
                {
                    name: '黑鳘鱼',
                    value: [
                        {
                            name: '育苗',
                            data: [1, 3]
                        },
                        {
                            name: '养殖',
                            data: [3, 12]
                        },
                        {
                            name: '越冬',
                            data: [12, 4]
                        },
                        {
                            name: '产卵',
                            data: [5, 6]
                        },
                        {
                            name: '上市',
                            data: [6, 8]
                        },
                        {
                            name: '养殖',
                            data: [9, 12]
                        }
                    ]
                }
            ]
        }
    },
    color: {
        type: Array,
        default: () => ['#6893ff', '#64eca4', '#ffdf87', '#e5e3a8']
    },
    height: {
        type: Number,
        default: 380
    },
    splitNumber: {
        type: Number,
        default: 5
    },
    barWidth: {
        type: Number,
        default: 5
    },
    interval: {
        type: String,
        default: 'auto'
    },
    pageConfig: {
        type: Object,
        default: () => {
            return {
                currentPage: 1, //默认当前页面为1
                pageSize: 4,
                total: 4 //总共有多少数据
            }
        }
    }
})
let option: any = ref({})

// 分页熟悉
const changePage = ref()

const maxPage = ref(0)
let showData = ref([])

//这里是获取当前页数
const handleCurrentChange = (val: number) => {
    changePage.value.currentPage = val
    // 起始序号
    const startIndex = (val - 1) * changePage.value.pageSize
    const chartData = JSON.parse(JSON.stringify(props.chartData))
    showData.value = chartData.slice(startIndex, startIndex + changePage.value.pageSize)
    initChart()
}

const initChart = () => {
    const categories: any[] = []

    const colors: any = props.color
    const data: any = []

    showData.value.forEach((item: any, index: number) => {
        categories.push(item.name)
        item.value.forEach((subItem: any, subIndex: number) => {
            data.push({
                name: subItem.name,
                value: [index, ...subItem.data, subItem.data[1] - subItem.data[0]],
                itemStyle: {
                    normal: {
                        color: subItem.name == '无数据' ? '#ccc' : colors[subIndex]
                    }
                }
            })
        })
    })

    function renderItem(params: any, api: any) {
        var categoryIndex = api.value(0)
        var start = api.coord([api.value(1), categoryIndex])
        var end = api.coord([api.value(2), categoryIndex])
        var height = api.size([0, 1])[1] * 0.6
        var rectShape = echarts.graphic.clipRectByRect(
            {
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            },
            {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            }
        )

        return (
            rectShape && {
                type: 'rect',
                transition: ['shape'],
                shape: rectShape,
                style: api.style()
            }
        )
    }

    const axis_label = JSON.parse(JSON.stringify(AXIS_LABEL))
    axis_label.formatter = function (val: string) {
        return val + ' 月'
    }
    option.value = {
        grid: {
            top: '5%',
            left: '0%',
            right: '5%',
            bottom: '0%',
            containLabel: true
        },
        tooltip: {
            formatter: function (params: any) {
                return params.marker + params.name + ': ' + params.value[3] + '月'
            },
            textStyle: {
                fontSize: 16,
                color: '#000'
            }
        },
        dataZoom: [
            {
                type: 'slider',
                filterMode: 'weakFilter',
                showDataShadow: false,
                top: 400,
                labelFormatter: ''
            },
            {
                type: 'inside',
                filterMode: 'weakFilter'
            }
        ],
        xAxis: {
            scale: true,
            axisLabel: axis_label
        },
        yAxis: {
            data: categories,
            axisLabel: AXIS_LABEL
        },
        series: [
            {
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: function (val: any) {
                        return val.name
                    },
                    fontSize: 14
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            }
        ]
    }
}

watch(
    () => props.chartData,
    (newValue: any) => {
        changePage.value = JSON.parse(JSON.stringify(props.pageConfig))
        changePage.value.total = newValue.length
        maxPage.value = Math.ceil(changePage.value.total / changePage.value.pageSize)
        handleCurrentChange(1)
    },
    { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.page {
    text-align: right;
}

::v-deep .el-pager li {
    padding: 0 4px;
    background-color: transparent;
}
::v-deep .el-pagination {
    color: #ffffffaa;
}

::v-deep .el-pagination button:disabled {
    color: #ffffffaa;
    background-color: transparent;
}

::v-deep .el-pager li.btn-quickprev,
.el-pager li.btn-quickprev {
    color: #ffffffaa;
}

::v-deep .el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
    color: #ffffffaa;
}

::v-deep .el-pager li {
    font-size: 24px;
}
</style>
